<template>
	<view class="normal-login-container">

		<view class="login-form-content">
			<view class="input-item flex align-center">
				<view class="iconfont icon-user icon"></view>
				<input v-model="registerForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
			</view>
			<view class="input-item flex align-center">
				<view class="iconfont icon-user icon"></view>
				<input v-model="registerForm.nickname" class="input" type="text" placeholder="请输入昵称" maxlength="30" />
			</view>
			<view class="input-item flex align-center">
				<view class="iconfont icon-password icon"></view>
				<input v-model="registerForm.password" type="password" class="input" placeholder="请输入密码"
					maxlength="20" />
			</view>
			<view class="input-item flex align-center">
				<view class="iconfont icon-password icon"></view>
				<input v-model="registerForm.confirmPassword" type="password" class="input" placeholder="请输入确认密码"
					maxlength="20" />
			</view>

			<view class="action-btn">
				<button @click="handleRegister()" class="register-btn cu-btn block bg-blue lg round">注册</button>
			</view>
		</view>
		<view class="xieyi text-center">
			<text @click="handleUserLogin" class="text-blue">使用已有账号登录</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userlist: [],
				registerForm: {
					username: "",
					nickname: "",
					password: "",
					confirmPassword: "",
					readname: '',
					sex: '',
					phone: '',
					email: '',
					mome: ''
				}
			}
		},
		created() {
			this.userlist = uni.getStorageSync('userlist') || []
		},
		methods: {
			// 使用已有账号登录
			handleUserLogin() {
				uni.navigateTo({
					url: `/pages/login/login`
				});
			},

			// 注册方法
			async handleRegister() {
				if (this.registerForm.username === "") {
					uni.showToast({
						title: "请输入您的账号",
						icon: 'none'
					})
				} else if (this.registerForm.nickname === "") {
					uni.showToast({
						title: "请输入您的昵称",
						icon: 'none'
					})
				} else if (this.registerForm.password === "") {
					uni.showToast({
						title: "请输入您的密码",
						icon: 'none'
					})
				} else if (this.registerForm.confirmPassword === "") {
					uni.showToast({
						title: "请再次输入您的密码",
						icon: 'none'
					})
				} else if (this.registerForm.password !== this.registerForm.confirmPassword) {
					uni.showToast({
						title: "两次输入的密码不一致",
						icon: 'none'
					})
				} else {
					// 进行注册
					this.register()
				}
			},
			// 判断当前账号是否存在
			isUserName(username) {
				let isFlag = false
				for (let i = 0; i < this.userlist.length; i++) {
					if (this.userlist[i].username == username) {
						return true
					}
				}
				return isFlag
			},
			// 用户注册
			register() {
				// 判断当前用户是否已经注册过
				console.log(this.isUserName(this.registerForm.username));
				if (this.isUserName(this.registerForm.username)) {
					uni.showToast({
						title: "用户名已存在",
						icon: 'none'
					})
				} else {
					// 将用户注册信息，添加到系统用户列表中
					// 随机生成一个id
					this.registerForm.id = Date.now()
					this.userlist.push(this.registerForm)
					try {
						uni.setStorageSync('userlist', this.userlist);
					} catch (e) {
						// error
					}
					uni.showModal({
						title: `恭喜你，您的账号: ${this.registerForm.username},注册成功！"`,
						showCancel: false,
						confirmText: '立即登录',
						success: function(res) {
							// 跳转到登录页面
							uni.navigateTo({
								url: `/pages/login/login`
							});

						},

					})


				}


			},

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #eeeeee;
	}

	.text-blue {
		color: #0081ff;
	}

	.normal-login-container {
		width: 100%;

		.login-form-content {
			text-align: center;
			margin: 20px auto;
			margin-top: 15%;
			width: 80%;

			.input-item {
				margin: 20px auto;
				background-color: #f5f6f7;
				height: 45px;
				border-radius: 10px;

				.icon {
					font-size: 38rpx;
					margin-left: 10px;
					color: #999;
				}

				.input {
					width: 100%;
					height: 40px;
					font-size: 14px;
					line-height: 40px;
					text-align: left;
					padding-left: 15px;
				}

			}

			.login-btn {
				margin-top: 40px;
				height: 45px;
			}

		}
	}
</style>